<template>
	<view class="container">
		<!-- 顶部统计卡片 -->
		<view class="stats-cards">
			<view class="stat-card">
				<text class="stat-value">{{ completedTasks }}</text>
				<text class="stat-label">已完成任务</text>
			</view>
			<view class="stat-card">
				<text class="stat-value">{{ totalStudyTime }}h</text>
				<text class="stat-label">总学习时长</text>
			</view>
			<view class="stat-card">
				<text class="stat-value">{{ completionRate }}%</text>
				<text class="stat-label">完成率</text>
			</view>
		</view>

		<!-- 学习目标列表 -->
		<view class="goals-section">
			<view class="section-header">
				<text class="section-title">学习目标</text>
				<view class="add-btn" @click="showAddGoal">
					<uni-icons type="plus" size="20" color="#4b7bec"></uni-icons>
				</view>
			</view>
			<view class="goals-list">
				<view class="goal-item" v-for="goal in goals" :key="goal.id">
					<view class="goal-content">
						<view class="goal-header">
							<text class="goal-title">{{ goal.title }}</text>
							<text :class="['goal-tag', goal.priority]">{{ goal.priorityText }}</text>
						</view>
						<view class="goal-progress">
							<view class="progress-bar">
								<view class="progress-fill" :style="{ width: goal.progress + '%' }"></view>
							</view>
							<text class="progress-text">{{ goal.progress }}%</text>
						</view>
						<view class="goal-footer">
							<view class="deadline">
								<uni-icons type="calendar" size="14"></uni-icons>
								<text>截止日期：{{ goal.deadline }}</text>
							</view>
							<view class="time-estimate">
								<uni-icons type="clock" size="14"></uni-icons>
								<text>预计时长：{{ goal.estimatedHours }}小时</text>
							</view>
						</view>
					</view>
					<view class="goal-actions">
						<view class="action-btn edit" @click="editGoal(goal)">
							<uni-icons type="compose" size="18"></uni-icons>
						</view>
						<view class="action-btn delete" @click="deleteGoal(goal)">
							<uni-icons type="trash" size="18"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 今日任务 -->
		<view class="tasks-section">
			<view class="section-header">
				<text class="section-title">今日任务</text>
				<view class="add-btn" @click="showAddTask">
					<uni-icons type="plus" size="20" color="#4b7bec"></uni-icons>
				</view>
			</view>
			<view class="tasks-list">
				<view class="task-item" v-for="task in todayTasks" :key="task.id">
					<view class="checkbox" @click="toggleTask(task)">
						<uni-icons :type="task.completed ? 'checkbox-filled' : 'circle'" size="24"
							:color="task.completed ? '#4b7bec' : '#a5b1c2'"></uni-icons>
					</view>
					<view class="task-content">
						<text class="task-title" :class="{ completed: task.completed }">{{ task.title }}</text>
						<view class="task-info">
							<text class="task-time">{{ task.startTime }} - {{ task.endTime }}</text>
							<text class="task-duration">{{ task.duration }}分钟</text>
						</view>
					</view>
					<view class="task-actions">
						<uni-icons type="more-filled" size="24" color="#a5b1c2"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 添加目标弹窗 -->
		<uni-popup ref="addGoalPopup" type="bottom">
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">添加学习目标</text>
					<view class="close-btn" @click="hideAddGoal">
						<uni-icons type="close" size="20"></uni-icons>
					</view>
				</view>
				<view class="form-item">
					<text class="label">目标名称</text>
					<input type="text" v-model="newGoal.title" placeholder="请输入目标名称" />
				</view>
				<view class="form-item">
					<text class="label">优先级</text>
					<picker :range="priorityOptions" v-model="newGoal.priority">
						<view class="picker-value">{{ priorityOptions[newGoal.priority] }}</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">截止日期</text>
					<picker mode="date" :value="newGoal.deadline" @change="onDateChange">
						<view class="picker-value">{{ newGoal.deadline || '请选择日期' }}</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">预计时长（小时）</text>
					<input type="number" v-model="newGoal.estimatedHours" placeholder="请输入预计时长" />
				</view>
				<button class="submit-btn" @click="submitGoal">确认添加</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				completedTasks: 12,
				totalStudyTime: 24,
				completionRate: 85,
				priorityOptions: ['低', '中', '高'],
				goals: [{
						id: 1,
						title: '完成高数第三章习题',
						priority: 'high',
						priorityText: '高优先级',
						progress: 60,
						deadline: '2024-03-20',
						estimatedHours: 8
					},
					{
						id: 2,
						title: '准备英语演讲',
						priority: 'medium',
						priorityText: '中优先级',
						progress: 30,
						deadline: '2024-03-25',
						estimatedHours: 4
					},
					{
						id: 3,
						title: '物理实验报告',
						priority: 'low',
						priorityText: '低优先级',
						progress: 90,
						deadline: '2024-03-18',
						estimatedHours: 2
					}
				],
				todayTasks: [{
						id: 1,
						title: '复习高数第二章',
						completed: true,
						startTime: '09:00',
						endTime: '10:30',
						duration: 90
					},
					{
						id: 2,
						title: '完成英语作业',
						completed: false,
						startTime: '14:00',
						endTime: '15:30',
						duration: 90
					},
					{
						id: 3,
						title: '预习物理实验',
						completed: false,
						startTime: '16:00',
						endTime: '17:00',
						duration: 60
					}
				],
				newGoal: {
					title: '',
					priority: 0,
					deadline: '',
					estimatedHours: ''
				}
			}
		},
		methods: {
			showAddGoal() {
				this.$refs.addGoalPopup.open();
			},
			hideAddGoal() {
				this.$refs.addGoalPopup.close();
			},
			editGoal(goal) {
				// 实现编辑目标的逻辑
				uni.showToast({
					title: '编辑功能开发中',
					icon: 'none'
				});
			},
			deleteGoal(goal) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这个学习目标吗？',
					success: (res) => {
						if (res.confirm) {
							this.goals = this.goals.filter(g => g.id !== goal.id);
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			toggleTask(task) {
				task.completed = !task.completed;
			},
			showAddTask() {
				uni.showToast({
					title: '添加任务功能开发中',
					icon: 'none'
				});
			},
			onDateChange(e) {
				this.newGoal.deadline = e.detail.value;
			},
			submitGoal() {
				if (!this.newGoal.title || !this.newGoal.deadline || !this.newGoal.estimatedHours) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}

				const goal = {
					id: Date.now(),
					title: this.newGoal.title,
					priority: ['low', 'medium', 'high'][this.newGoal.priority],
					priorityText: ['低优先级', '中优先级', '高优先级'][this.newGoal.priority],
					progress: 0,
					deadline: this.newGoal.deadline,
					estimatedHours: Number(this.newGoal.estimatedHours)
				};

				this.goals.push(goal);
				this.hideAddGoal();
				this.newGoal = {
					title: '',
					priority: 0,
					deadline: '',
					estimatedHours: ''
				};

				uni.showToast({
					title: '添加成功',
					icon: 'success'
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx;
		background-color: #f8f9fc;
		min-height: 100vh;
	}

	.stats-cards {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.stat-card {
			flex: 1;
			margin: 0 10rpx;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 20rpx;
			text-align: center;

			.stat-value {
				font-size: 36rpx;
				color: #2d3436;
				font-weight: bold;
				display: block;
				margin-bottom: 10rpx;
			}

			.stat-label {
				font-size: 24rpx;
				color: #636e72;
			}
		}
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.section-title {
			font-size: 32rpx;
			color: #2d3436;
			font-weight: bold;
		}

		.add-btn {
			padding: 10rpx;
		}
	}

	.goals-list {
		.goal-item {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			display: flex;

			.goal-content {
				flex: 1;

				.goal-header {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;

					.goal-title {
						font-size: 28rpx;
						color: #2d3436;
						margin-right: 16rpx;
					}

					.goal-tag {
						padding: 4rpx 12rpx;
						border-radius: 20rpx;
						font-size: 20rpx;
						color: #fff;

						&.high {
							background-color: #ff6b6b;
						}

						&.medium {
							background-color: #ffa502;
						}

						&.low {
							background-color: #45aaf2;
						}
					}
				}

				.goal-progress {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;

					.progress-bar {
						flex: 1;
						height: 10rpx;
						background-color: #dfe6e9;
						border-radius: 5rpx;
						margin-right: 16rpx;
						overflow: hidden;

						.progress-fill {
							height: 100%;
							background-color: #4b7bec;
							border-radius: 5rpx;
						}
					}

					.progress-text {
						font-size: 24rpx;
						color: #636e72;
						min-width: 60rpx;
					}
				}

				.goal-footer {
					display: flex;
					font-size: 24rpx;
					color: #636e72;

					.deadline,
					.time-estimate {
						display: flex;
						align-items: center;
						margin-right: 30rpx;

						text {
							margin-left: 8rpx;
						}
					}
				}
			}

			.goal-actions {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: 20rpx;

				.action-btn {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 30rpx;

					&.edit {
						background-color: #4b7bec;
						color: #fff;
					}

					&.delete {
						background-color: #ff6b6b;
						color: #fff;
					}
				}
			}
		}
	}

	.tasks-list {
		.task-item {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;

			.checkbox {
				margin-right: 20rpx;
			}

			.task-content {
				flex: 1;

				.task-title {
					font-size: 28rpx;
					color: #2d3436;
					margin-bottom: 8rpx;

					&.completed {
						text-decoration: line-through;
						color: #a5b1c2;
					}
				}

				.task-info {
					display: flex;
					font-size: 24rpx;
					color: #636e72;

					.task-time {
						margin-right: 20rpx;
					}
				}
			}

			.task-actions {
				padding: 10rpx;
			}
		}
	}

	.popup-content {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 30rpx;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.popup-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #2d3436;
			}

			.close-btn {
				padding: 10rpx;
			}
		}

		.form-item {
			margin-bottom: 30rpx;

			.label {
				font-size: 28rpx;
				color: #2d3436;
				margin-bottom: 16rpx;
				display: block;
			}

			input {
				width: 100%;
				height: 80rpx;
				border: 1px solid #dfe6e9;
				border-radius: 8rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
			}

			.picker-value {
				width: 100%;
				height: 80rpx;
				border: 1px solid #dfe6e9;
				border-radius: 8rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				line-height: 80rpx;
			}
		}

		.submit-btn {
			background-color: #4b7bec;
			color: #fff;
			border-radius: 8rpx;
			font-size: 32rpx;
			height: 88rpx;
			line-height: 88rpx;
			margin-top: 30rpx;
		}
	}
</style> 